<template>
  <div class="com-forum-topic-base">
    <div class="wrap">
      <div class="wrap-top ellipsis3">{{ info.content }}</div>
      <div class="wrap-content rich-text ellipsis2" v-if="info.forumDto" v-html="getContent(info.forumDto.subContent)" @click="viewDetail"></div>
      <div class="wrap-bottom flex-wrap space-between flex-text-mid fc-999 fs-12">
<!--        <div>{{ info.createDate }}</div>-->
        <div class="num flex-wrap flex-text-mid">
          <template v-if="info.auditStatus != 2">
            <span class="danger" v-if="info.auditStatus ==1">审核中</span>
            <span class="danger" v-if="info.auditStatus ==3">审核驳回：{{ info.auditReason }}</span>
          </template>
          <template v-else>
          <span>{{info.forumDto && info.forumDto.viewNum }}查看</span>
          <span class="split-line"></span>
          <span>{{info.forumDto && info.forumDto.praiseNum}}点赞</span>
        </template>
        </div>
        <div class="opt-wrap" @click="delTopic">
          删除
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { decodeURIComponent } from '@/assets/js/util'
export default {
  name: "ReplayList",

  props: {
    info: {
      type: Object,
      default: () => {}
    }
  },
  methods: {
    getContent(str) {
		if (str && decodeURIComponent(str)) {
			return decodeURIComponent(str)
		} else {
			return str
		}
    },
    viewDetail() {
      this.$uniPush({
        name: 'forum-detail-id',
        params: {
          id: this.info.forumId
        }
      })

    },
    delTopic() {
      this.$dialog.confirm({
        message: `确定删除该回复？`,
        showCancelButton: true,
      }).then(_ => {
        let params = { topicId: this.info.topicId }
        this.$api.forum.deleteTopic(params).then(res => {
          this.$toast.success('删除成功')
          this.$emit('refresh')
        })
      }).catch(e => {})
    }
  }
}
</script>

<style lang="scss" scoped>
.com-forum-topic-base {
  .wrap {
    padding-bottom: 19px;
    border-bottom: 1px solid #eee;
    .wrap-top {
      font-size: 16px;
      text-align: left;
      line-height: 20px;
      min-height: 20px;
      padding-top: 20px;
    }
    .wrap-content {
      padding: 10px 20px 0;
      background: #F5F5F5;
      font-size: 14px;
      min-height: 40px;
      line-height: 20px;
      margin: 10px 0;
      cursor: pointer;
      &:hover, &.active {
        color: var(--color);
      }
    }
    .wrap-bottom {
      display: flex;
      align-items: center;
      .opt-wrap {
        cursor: pointer;
        margin-left: 30px;
        &:hover {
          color: var(--color);
        }
        i {
          font-size: 14px;
          margin-right: 5px;
        }
      }
    }
  }
}
</style>